import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    /* background fit */
    wView: 0,
    hView: 0,
    pantographView: 0,
    pantographBg: 9/16,

    /* show menu */
    showMenu: false,
    switchMenu: true,

    /* show PlayerBar */
    showPlayerBar: false,

    /* Player */
    playingIndex:0,
    playerData:{
      id: '',
      name: '',
      artist: '',
      image: '',
      list: [],
      index: 0
    },

    /* music */
    isPlay: true,

    /* choose backgroundImage */
    backgroundImgIndex: 1,
    linkImg : [
      {src: require('../src/assets/bg0.jpg')},
      {src: require('../src/assets/bg1.jpg')},
      {src: require('../src/assets/bg2.jpg')},
      {src: require('../src/assets/bg3.jpg')},
      {src: require('../src/assets/bg4.jpg')},
      {src: require('../src/assets/bg5.jpg')}
    ]
  },
  getters: {
    bgImgSize: state => {
      let w_bg, h_bg;
      if (state.pantographView >= state.pantographBg ) {
        w_bg = state.wView;
        h_bg = w_bg / state.pantographBg;
      } else {
        h_bg = state.hView;
        w_bg = h_bg * state.pantographBg;
      }
      return [w_bg, h_bg]
    }
  },
  mutations: {
    openPlayer(state){
      state.isPlayerOpen = true;
    },
    changePlayingSong(state, songID){
      state.playingSongID = songID;
    },
    updateStateViewData(state, arr){
      state.wView = arr[0];
      state.hView = arr[1];
      state.pantographView = arr[2];
    },
    updatePlayerData( state, arr ){
      state.playerData.id = arr[0],
      state.playerData.name = arr[1],
      state.playerData.artist = arr[2],
      state.playerData.image = arr[3],
      state.playerData.list = arr[4],
      state.playerData.index = arr[5]
    },
    showMenu(state){
      state.showMenu = true;
    },
    hideMenu(state){
      state.showMenu = false;
    },
    onSwitchMenu(state){
      state.switchMenu = true;
    },
    offSwitchMenu(state){
      state.switchMenu = false;
    },
    chooseBackground(state, num){
      state.backgroundImgIndex = num;
    },
    toggleMusic(state){
      state.isPlay = !state.isPlay;
    },
    showPlayerBar(state){
      state.showPlayerBar = true;
    },
    hidePlayerBar(state){
      state.showPlayerBar = false;
    }
  },
  actions: {

  }
})
